<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
			}
			li{
				list-style: none;
			}
			/* 光标聚焦 */
			input:focus{
				outline: none;
			}
			/* 圆角 border-radius 开始*/
			.box1{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				border-radius: 50%;
			}
			/* 结束 */
			
			/* 三角形开始 */
			.box2{
				width: 0;
				height: 0;
				border-top: 100px solid transparent;
				border-bottom: 100px solid transparent;
				border-left: 100px solid transparent;
				border-right: 100px solid blueviolet;
			}
			/* 结束 */
			
			/* 输入框开始 */
			.intext{
				width: 240px;
				height: 60px;
				border: 1px solid gainsboro;
				margin: auto;
				text-align: center;
			}
			.intext input{
				width: 50%;
				height: 50%;
				
			}
			/* 结束 */
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="intext">
			<input type="text" placeholder="请输入"/>
		</div>
	</body>
</html>
